// 过滤器 对元素数据进行处理
// 定义过滤器
Vue.filter('toGender',function (value) {
   return value ? '男':'女';
});
Vue.config.keyCodes.f1 = 112;
let app = new Vue({
    el:'#root',
    data:{
        userData:Mock.mock({'data|10':[{
        name:'@cname',
        gender:'@boolean',
        city:'@city',
        phoneNumber:/^1[35789]\d{9}$/,
        age:'@integer(16,30)'
        }]}).data,
        msg:'hello,world!',
        htmlTag:'<h2>11223434556</h2>',
        username:'',
        isLogIn:false,
        href:'https://www.baidu.com',
        hrefName:'baidu',
        isActive:true,
        d:'active',
        ipt:'',
        fn(){
           alert(123123);
        },
        ftBar:['男生','女生','20以下','移动'],
        selectedKey:-1 //只有改写四为-1，其他为0
    },
    methods:{
        clickToDel(index){
          this.userData.splice(index,1);
        },
        fn(){
        console.log(this.username);
        },
        select(key){
            // 改写一
            // this.selectedKey = key;
            // var selectedFns = {
            //     0:() => this.userData = this.userData.filter(value => value.gender),
            //     1:() => this.userData = this.userData.filter(value => !value.gender),
            //     2:() => this.userData = this.userData.filter(value => value.age < 20),
            //     3:() => this.userData = this.userData.filter(value => /^1[3458]/.test(value.phoneNumber))
            // };
            // selectedFns[key]();
            // 改写二
            this.selectedKey = (key);
            // let selectedFns = {
            //     0:() => value => value.gender,
            //     1:() => value => !value.gender,
            //     2:() => value => value.age < 20,
            //     3:() => value => /^1[3458]/.test(value.phoneNumber)
            // };
            // this.userData = this.userData.filter(selectedFns[key]);
            // 第一种
            // if(key === 0){
            //     this.userData = this.userData.filter(function (value) {
            //       return value.gender;
            //     })
            // }
            // if(key === 1){
            //     this.userData = this.userData.filter(function (value) {
            //         return !value.gender;
            //     })
            // }
            // if(key === 2){
            //     this.userData = this.userData.filter(function (value) {
            //         return value.age < 20;
            //     })
            // }
            // if(key === 3){
            //     this.userData = this.userData.filter(function (value) {
            //         return /^1[3458]/.test(value.phoneNumber);
            //     })
            // }
        }
    },

    computed:{
        filterUser:function () {
            // 改写四
            let selectedFns = {
                '-1':() => true,
                0:value => value.gender,
                1:value => !value.gender,
                2:value => value.age < 20,
                3:value => /^1[3458]/.test(value.phoneNumber)
            };
            return this.userData.filter(selectedFns[this.selectedKey]);
            // 改写三
          // if(this.selectedKey === 0){
          //     return this.userData.filter(value => value.gender)
          // }
          // if(this.selectedKey === 1){
          //     return this.userData.filter(value => !value.gender)
          // }
          // if(this.selectedKey === 2){
          //     return this.userData.filter(value => value.age < 20)
          // }
          // if(this.selectedKey === 3){
          //     return this.userData.filter(value => /^1[3458]/.test(value.phoneNumber))
          // }
        }
    }
});
